/*
 * @Description:
 * @Author: dh
 * @Date: 2022-01-24 13:59:53
 * @LastEditors: dh
 * @LastEditTime: 2022-04-13 11:55:49
 */
//             剪切插入到前面
// .insertBefore()
// 将A元素(.top)剪切，插入到B元素(.end)之前、
$('.top').insertBefore('.end')

// .before()
// 相反 将B元素(.end)剪切，插入到A元素(.top)之前
$('.top').before($('.end'))

//             剪切插入到后面
// .insertAfter()
// 将A元素(.top)剪切，插入到B元素(.end)之后、
$('.top').insertAfter('.end')

// .after()
// 相反 将B元素(.end)剪切，插入到A元素(.top)之后、
$('.top').after($('.end'))

// 头                移动元素节点
// .prependTo()
// 将p标签插入到ul内的最顶部、
$('p').prependTo('ul')

// .prepend()
// 在p标签内最顶部插入标签、
$('p').prepend($('ol'))

// 尾                移动元素节点
// appendTo()
// 将p标签插入到ul内的末尾处、
$('p').appendTo('ul')

// append()
// 在p标签内末尾处插入标签、
$('p').append('<spam style="color:#fff;">2</span>')

//                  清除元素节点、
// .remove()
// 删除(剪切)并返回被删元素节点、(绑定事件会被清理)
var dom = $('p').remove()
console.log(dom)
// 删除(剪切)并返回被删元素节点、(绑定事件不会被清理)
console.log($('p').detach())

//                  创建元素节点、
$('<span style="color:red;">123</span>')

// .wrap() html|element|fn
// 给元素节点套一个父级、
$('#demo').wrap('<div></div>')
// 方法二： $('#demo').wrap(fun);
$('a').wrap(function (index, ele) {
	return $('li')
})

// .wrapInner()
// 给指定元素(ul)里面的子级套一个父级、
$('ul').wrapInner('<div></div>')
// 方法二： $('#demo').wrapInner(fun);

// .wrapAll()
// 给选中的元素套一个统一的父级、(被选中的li会套到一个div里去)
$('li').wrapAll('<div></div>')

// .unwrap()
// 删除自身的父级、(截止到body)
$('#box').unwrap()

// .clone()
// 克隆元素节点、参数：克隆事件(true)
$('#box').clone(true).appendTo('body')

// .data()
// 存/取 数据、状态  (跟dom对象有一定映射关系)
$('#box').data('f', 1) // 赋值方式有两种(str/obj)、
$('#box').data({ a: 1, b: '2', c: true }) // 取值方式：.data('c')
